<template>
  <div class="changepwd">
    <el-col class="changepwdCoainter" :xs="18">
      <div class="title">Change Password</div>
      <div class="tipinfo">
        <p>For security reasons, please enter the email address you used to register.</p>
        <p>We will send you a verification code to to change your password.</p>
      </div>
      <el-form
        label-width="120px"
        label-position="top"
        :model="changePwdInfo"
        :rules="changePwdrules"
        ref="ruleFormRef"
      >
        <el-form-item label="Email" prop="Email">
          <el-input v-model="changePwdInfo.Email" />
        </el-form-item>
      </el-form>
      <el-button
        :color="isdisabled ? '#6B6B6B' : '#00aa8b'"
        :disabled="isdisabled"
        @click="handleSub"
        >Submit</el-button
      >
    </el-col>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
// import { Passwordfuc, confirmPwdfuc } from '@/utils/rules.ts';
const isdisabled = ref(true);
const ruleFormRef = ref();
const changePwdInfo = reactive({
  Email: '',
});

const changePwdrules = reactive({
  Email: [
    {
      required: true,
      message: 'Please input Email',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: 'Please input correct email address',
      trigger: ['blur', 'change'],
    },
  ],
});

// 处理提交
function handleSub() {}
</script>
<style scoped lang="less">
.changepwd {
  overflow: hidden;
  .changepwdCoainter {
    width: 464px;
    margin: 0 auto;
    margin-top: 30px;
    font-family: "Neue Machina";
    .title {
      color: #cdcdcd;
      font-size: 28px;
    }
    .tipinfo {
      color: #cdcdcd;
      font-size: 15px;
      margin: 16px 0 25px;
    }
    /deep/ .el-form {
      .el-form-item__label {
        color: white;
      }
      .el-input {
        height: 44px;
        svg,
        .el-input__icon {
          width: 20px;
          height: 20px;
        }
      }
      ul {
        color: white;
        margin-top: 4px;
        font-size: 11px;
        li {
          margin-left: 18px;
        }
        &:last-child {
          height: 50px;
          line-height: 50px;
          margin-top: 4px;
        }
      }
    }
    .el-button {
      width: 100%;
      height: 44px;
    }
  }
  @media screen and (max-width: 768px) {
    .forgotpsdCoainter {
      margin-top: 36px;
    }
  }
}
</style>
